<!DOCTYPE html>
<html>

<head>
    <title>账号绑定</title>
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="./js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./js/bootstrap.min.js"></script>
    <!-- axios -->
    <script src="./js/axios.min.js"></script>
    <!-- vue -->
    <script src="./js/vue.js"></script>
</head>

<body style="background-color: rgb(240, 240, 240);">
<div id="root" class="container" style="margin-top: 50px;">
    <div class="row clearfix">
        <div class="col-md-12 column"
             style="border: 10px solid rgb(250, 250, 250); margin: 5px;margin-top: 20%; background-color: rgb(255, 255, 255);">
            <img height="70" width="80" alt="" style="clear: both;display: block;margin: auto;" src="./img/icon.png"
                 class="img-circle aligncenter"/>
            <h3 class="text-center">
                请绑定账号
            </h3>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="workNo" class="col-sm-2 control-label">工 号</label>
                    <div class="col-sm-10">
                        <input v-model="workNo" type="email" class="form-control" id="workNo"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-sm-2 control-label text-left">密 码</label>
                    <div class="col-sm-10">
                        <input v-model="password" type="password" class="form-control" id="inputPassword"/>
                    </div>
                </div>

                <div class="form-group" style="margin-top: 30px;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button @click="bind" type="button" class="btn btn-primary btn-block">绑定</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    // 在微信公众号菜单中的授权按钮中，微信授权链接的回调URL
    let interface_ip_port = "http://111.17.201.197:999";
    let page_ip_port = "http://111.17.201.197:55000";
    //创建一个Vue的实例对象
    new Vue({
        el: '#root',
        data: {
            workNo: "",//工号
            password: "",//密码
            code: ""//微信认证的code
        },
        methods: {
            //绑定函数
            bind() {
                let regWorkNo = new RegExp("^0[0-9]{4}$"); //检验输入工号，必须为5个数字
                let regPwd = new RegExp("^.{6,}$"); //检验输入密码，大雨6个字符
                //检验输入
                if (!regWorkNo.test(this.workNo)) {
                    alert("请输入正确的工号！")
                    return;
                }
                if (!regPwd.test(this.password)) {
                    alert("请输入正确的密码！")
                    return;
                }
                if (this.code == "" && this.code != null) {
                    alert("code为空")
                    return;
                }
                let data = {"code":this.code,"workNo":this.workNo,"password":this.password};
                axios({
                    method: 'post',
                    url: `${interface_ip_port}/sys/wx/bind`,
                    data: data
                }).then((res) => {
                    if (res.data.success) {
                        //清空页面，只保留一个绑定成功四个字，模拟跳转
                        let rootDiv = document.getElementById("root");
                        rootDiv.innerHTML = "<h1  style='text-align: center;margin-top:10%'>绑定成功</h1>";
                    } else {
                        alert(res.data.message);
                    }
                });
            },
            //获取url中的名为key的参数
            getParams(key) {
                let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
                let r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    return unescape(r[2]);
                }
                return null;
            }
        },
        //vm挂载完毕
        mounted() {
            /*
                vm加载完毕后首先从路径中获取参数code，
                此页面为微信认证后的回调页面（在ipc备案的域名下），微信认证是为了拿到code，后端通过code获取用户opedID
            */
            this.code = this.getParams("code");
            console.log("微信code====>", this.code);
        },
    })
</script>

</html>